<template>
    <div class="boxs">
        <el-card>
            <div class="flex_between">
                <span>资源类型</span>
                <el-button icon="el-icon-plus" type="primary" plain size="small" @click="openDialog">添加类型</el-button>
            </div>

            <el-table border :data="moreArr" style="margin-top: 15px" v-loading="loading">
                <el-table-column label="index" align="center" width="100" type="index" />
                <el-table-column label="类型" align="center" prop="type">
                    <template slot-scope="scope">
                        {{ scope.row.type }}
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" width="300">
                    <template slot-scope="scope">
                        <el-button size="mini"
                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.page" :limit.sync="queryParams.size"
                @pagination="getMore" />
        </el-card>

        <el-dialog title="操作" :visible.sync="dialogVisible" width="40%">
            <el-form class="demo-form-inline" label-width="150px" :model="form" :rules="rules" ref="ruleForm">
                <el-form-item label="type" prop="type">
                    <el-input v-model="form.type" placeholder="请输入类型" />
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">关闭</el-button>
                <el-button :type="form.id ? 'warning' : 'primary'" @click="affirm">{{
                    form.id ? "提交" : "提交"
                }}</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { getMediaType, editMediaType } from "@/api/porter";
export default {
    name: "mediaType",
    data() {
        return {
            queryParams: {
                page: 1,
                size: 10,
            },
            total: 0,
            loading: false,
            addLoading: false,
            moreArr: [],
            dialogVisible1:true,
            dialogVisible: false,
            form: {
                comment_type: "",
            },
            search: "",
            rules: {
                comment_type: [ 
                    { required: true, message: "Please enter the type", trigger: "blur" },
                ],
            },
        };
    },
    created() {
        // const { package_name } = this.$route.query;
        this.setQueryParams();
    },
    methods: {
        async getMore() {
            this.loading = true;
            let { data } = await getMediaType();
            this.loading = false;
            this.moreArr = data;
            console.log(data) 
        },
        setQueryParams() {
            this.getMore();
        },

        async affirm() {
            this.$refs["ruleForm"].validate(async (valid) => {
                if (!valid) return;
                try {
                    this.addLoading = true;
                    await editMediaType(this.form);
                    this.addLoading = false;
                    this.$message.success(this.form.id ? "success!" : "success!");
                    this.getMore();
                    this.dialogVisible = false;
                } catch (e) {
                    this.addLoading = false;
                }
            });
        },
        openDialog() {
            this.form = {};
            this.dialogVisible = true;
        },
        handleEdit(i, row) {
            this.form = { ...row };
            this.dialogVisible = true;
        },
        handleDelete(index, row) {
            this.$confirm('This operation will permanently delete the data, do you want to continue?', 'hint', {
                confirmButtonText: 'confirm',
                cancelButtonText: 'close',
                type: "error",
            }).then(async () => {
                row.state=1
                await editMediaType(row);
                this.getMore();
                this.$message({
                    message: "success!",
                    type: "success",
                });
            });
        },
    },
};
</script>
<style lang="scss" scoped>
.boxs {
    padding: 20px;
}
</style>